<template>
    <!--管理员-->
    <div class="role">
        <a-card>
            <div class="table">
                <Tables
                    ref="table"
                    :columns="columns"
                    :loadData="findAdminList"
                    :addData="addAdmin"
                    :editData="editAdmin"
                    :delData="delAdmin"
                    :formColumns="formColumns"
                >
                    <template slot="type" slot-scope="{ text }">
                        <span>{{ types[text] }}</span>
                    </template>
                    <template slot="storeId" slot-scope="{ text }">
                        <span>{{ formatStore(text) }}</span>
                    </template>
                </Tables>
            </div>
        </a-card>
    </div>
</template>

<script>
import { addAdmin, delAdmin, editAdmin, findAdminList } from '@/api/admin'
import { findRoleAll } from '@/api/role'
import rules from '@/validate/admin'

export default {
    name: 'RoleList',
    data() {
        return {
            columns: [
                {
                    dataIndex: 'username',
                    title: '姓名',
                    align: 'center'
                },
                {
                    dataIndex: 'phone',
                    title: '手机号',
                    align: 'center'
                },
                {
                    dataIndex: 'type',
                    title: '角色',
                    align: 'center',
                    scopedSlots: { customRender: 'type' }
                },
                // {
                //     dataIndex: 'avatar',
                //     title: '头像',
                //     align: 'center'
                // },
                {
                    dataIndex: 'storeId',
                    title: '店铺',
                    align: 'center',
                    scopedSlots: { customRender: 'storeId' }
                },
                {
                    dataIndex: 'role.name',
                    title: '权限',
                    align: 'center'
                }
            ],
            formColumns: {
                username: {
                    type: 'input',
                    label: '姓名'
                },
                phone: {
                    type: 'input',
                    label: '手机号'
                },
                password: {
                    type: 'input',
                    label: '密码',
                    inputType: 'password'
                },
                roleId: {
                    type: 'select',
                    label: '权限',
                    options: [],
                    optionsLabel: {
                        name: 'name',
                        value: 'id'
                    }
                },
                storeId: {
                    type: 'select',
                    mode: 'multiple',
                    label: '店铺',
                    options: [
                        {
                            name: '邮差蛋糕总店',
                            value: '15145249'
                        },
                        {
                            name: '邮差蛋糕（渝中配送中心）',
                            value: '74852863'
                        },
                        {
                            name: '邮差蛋糕（渝北配送中心）',
                            value: '116399626'
                        },
                        {
                            name: '渝北店配送中心',
                            value: '74852864'
                        },
                        {
                            name: '时代店配送中心',
                            value: '119079255'
                        }
                    ]
                },
                type: {
                    type: 'select',
                    label: '类型',
                    options: [
                        {
                            name: '客服',
                            value: 1
                        },
                        {
                            name: '前台',
                            value: 2
                        },
                        {
                            name: '管理员',
                            value: 3
                        }
                    ]
                },
                // avatar: {
                //     type: 'upload',
                //     label: '头像',
                //     images: []
                // },
                id: {
                    type: 'hidden'
                }
            },
            types: {
                1: '客服',
                2: '前台',
                3: '管理员'
            },
            rules: rules,
            stores: {
                15145249: '邮差蛋糕总店',
                74852863: '邮差蛋糕（渝中配送中心）',
                116399626: '邮差蛋糕（渝北配送中心）',
                74852864: '渝北店配送中心',
                119079255: '时代店配送中心'
            },
            findAdminList,
            addAdmin,
            editAdmin,
            delAdmin
        }
    },
    created() {
        this.findRoleAll()
    },
    methods: {
        async findRoleAll() {
            const res = await findRoleAll()
            const { data } = res
            this.$set(this.formColumns.roleId, 'options', data)
        },
        formatStore(storeIds) {
            if (!storeIds) return ''

            return storeIds
                .map(key => this.stores[key])
                .filter(items => items)
                .join(',')
        }
    }
}
</script>

<style scoped></style>
